<template>
  <sub-page>
    <!-- 导航 -->
    <!-- <div class="navList">
      <div class="navItem active">游戏设置</div>
      <div class="navItem">获奖记录</div>
      <div class="navItem">支付记录</div>
    </div> -->
    <!-- 设置提示 -->
    <!-- <div class="tip">开始游戏后，游戏期间不可修改相关数据</div> -->
    <main-card>
      <card-top-info title="啤酒大作战设置"></card-top-info>
      <div class="settingForm">
        <div class="setting-item">
          <div class="setting-item-title">游戏时间</div>
          <div class="setting-item-content">
            <el-input-number v-model="formData.gameTime" :min="180" :max="1800" :step="1" controls-position="right" />
            <span style="margin-left: 15px">秒</span>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-title">单次价格</div>
          <div class="setting-item-content">
            <el-input-number v-model="formData.perPrice" :min="0.01" :max="100" :step="0.01" controls-position="right" />
            <span style="margin-left: 15px">元</span>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-title">单次累计奖品数量</div>
          <div class="setting-item-content">
            <el-input-number v-model="formData.perPrizeNum" :min="1" :max="10000" :step="1" controls-position="right" />
            <span style="margin-left: 15px">个</span>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-title">彩头数量</div>
          <div class="setting-item-content">
            <el-input-number v-model="formData.initPrizeNum" :min="1" :max="10000" :step="1" controls-position="right" />
            <span style="margin-left: 15px">个</span>
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-title">奖品名称</div>
          <div class="setting-item-content">
            <el-input v-model="formData.prizeName" />
          </div>
        </div>
        <div class="setting-item">
          <div class="setting-item-title">奖品图片</div>
          <div class="setting-item-content prizeImgUpload">
            <el-upload class="avatar-uploader" action :http-request="handleFile" :show-file-list="false">
              <img v-if="formData.prizeImg" :src="formData.prizeImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="submit-btn">
          <el-button type="primary" @click="submitSetting">提交</el-button>
        </div>
      </div>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import CardTopInfo from '@/components/cardTopInfo';
import request from '@/utils/request';
import { getActivityMsg } from '@/api/setting/activitySetting/gameSetting';

export default {
  name: 'DiceGame',
  data() {
    return {
      formData: {
        gameTime: 180, // 单位秒
        perPrice: 0.01, // 单次价格
        perPrizeNum: 1, // 单次累计奖品数量
        initPrizeNum: 10, // 彩头数量
        prizeName: '', // 奖品名称
        prizeImg: '', // 奖品图片
      },
      tempFile: null,
    };
  },
  components: {
    SubPage,
    MainCard,
    CardTopInfo,
  },
  created() {
    this.getFormData();
  },
  methods: {
    formValidate() {
      let tmpResult = true;
      if (!this.formData.prizeName) {
        this.$message.error('奖品名称不能为空');
        tmpResult = false;
      }
      if (!this.formData.prizeImg) {
        this.$message.error('奖品图片不能为空');
        tmpResult = false;
      }
      return tmpResult;
    },
    hasImgUpload() {
      return this.formData.prizeImg.indexOf('http') === -1;
    },
    uploadImg() {
      return new Promise((resolve, reject) => {
        if (this.hasImgUpload()) {
          const formData = new FormData();
          formData.append('file', this.tempFile);
          request
            .post('/beiJing/shangchuanTomcat', formData)
            .then((res) => {
              this.formData.prizeImg = res.data.filePath;
              resolve(res.data.filePath);
            })
            .catch((err) => {
              reject(err);
            });
        } else {
          resolve(this.formData.prizeImg);
        }
      });
    },
    submitSetting() {
      if (!this.formValidate()) {
        return;
      }
      console.log(this.formData);
      this.uploadImg().then(() => {
        return request.post('/qiYeNe/update', {
          splid: this.$store.state.liveId,
          beerJson: JSON.stringify(this.formData),
        });
      }).then((res) => {
        console.log(res);
        this.$message.success('提交成功');
      }).catch((err) => {
        console.log(err);
        this.$message.error('提交失败');
      });
    },
    handleFile(e) {
      if (e.file.size > 21000000) {
        this.$message.error('上传图片不超过20M!');
        return;
      }
      if (!(e.file.type === 'image/jpeg' || e.file.type === 'image/png')) {
        this.$message.error('上传图片只能是jpg或png格式');
        return;
      }
      this.tempFile = e.file;
      const reader = new FileReader();
      reader.readAsDataURL(this.tempFile);
      reader.onload = () => {
        this.formData.prizeImg = reader.result;
      };
    },
    getFormData() {
      getActivityMsg({
        id: this.$store.state.liveId,
      })
        .then((res) => {
          console.log(res);
          this.convertServerDataAndInitForm(res.data.beerJson);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    convertServerDataAndInitForm(jsonStr) {
      try {
        const tmpJsonObj = JSON.parse(jsonStr);
        this.formData.gameTime = tmpJsonObj.gameTime;
        this.formData.perPrice = tmpJsonObj.perPrice;
        this.formData.perPrizeNum = tmpJsonObj.perPrizeNum;
        this.formData.initPrizeNum = tmpJsonObj.initPrizeNum;
        this.formData.prizeName = tmpJsonObj.prizeName;
        this.formData.prizeImg = tmpJsonObj.prizeImg;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// .navList {
//   display: flex;
//   align-items: center;
//   margin-bottom: 8px;
//   gap: 24px;
//   padding: 20px 20px 0 20px;
//   .navItem {
//     font-size: 16px;
//     font-weight: 400;
//     color: rgba(0, 0, 0, 0.4);
//     cursor: pointer;
//     &.active {
//       color: #333333;
//     }
//   }
// }
// .tip {
//   font-size: 14px;
//   font-weight: 400;
//   color: #fb466c;
//   padding: 20px 20px 0 20px;
// }
.settingForm {
  padding: 20px;
  .setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .setting-item-title {
      width: 120px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }
    .setting-item-content {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      .el-input-number {
        width: 200px;
      }
      .el-input {
        width: 200px;
      }
      &.prizeImgUpload::v-deep {
        .avatar-uploader {
          .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
              border-color: #409eff;
            }
          }
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
    }
  }
  .submit-btn {
    padding-left: 100px;
  }
}
</style>
